<template>
  <div class="layout-box">
    <div class="content-box">
      <component
        :is="isDrawer ? 'el-drawer' : 'div'"
        v-model="leftDrawer"
        size="20%"
        style="min-width: 300px; width: 20%"
        direction="ltr"
        :with-header="false"
      >
        <aside>
          <div class="aside-header">
            <img @click="handleMenu('打开模型')" src="./img/file.svg" />
            <img @click="handleMenu('加载点')" src="./img/test-drop.svg" />
            <img @click="handleMenu('打开点')" src="./img/test-drop.svg" />
            <img
              @click="handleMenu('打开所有节点')"
              src="./img/open-tree.svg"
            />
          </div>
          <div style="height: calc(100% - 30px); width: 100%">
            <leftTree
              :style="`height: ${showPointTree? 50 : 100}%;`"
              ref="treeRef"
              :data="treeData"
              :selectKeys="selectKeys"
              @setSelectModel="setSelectModel"
              @visibleModel="visibleModel"
            />
            <pointTree v-if="showPointTree" @on-change="pointTreeChange" style="height: 50%;" :treeData="pointData.data"></pointTree>
          </div>
        </aside>
      </component>

      <main>
        <div class="main-header">
          <img
              class="btn-drawer"
              v-if="isDrawer"
              @click="leftDrawer = !leftDrawer"
              src="./img/selected-type.svg"
            />
          <div class="main-header-left">
            V5转GLB
          </div>
          <div class="main-header-right">
            <!-- <el-dropdown style="margin-right: 20px;" trigger="click">
              <img src="./img/mode-switching.svg"/>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleMenu('fit-selected-item-in')">Fit Selected Item In</el-dropdown-item>
                  <el-dropdown-item @click="handleMenu('fit-all-in')">Fit All In</el-dropdown-item>
                  <el-dropdown-item @click="handleMenu('穿透模式')">穿透模式</el-dropdown-item>
                  <el-dropdown-item @click="handleMenu('取消穿透')">取消穿透</el-dropdown-item>
                  
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
            <el-popover class="box-item" title="" placement="top">
              <template #reference>
                <img src="./img/model-color.svg" />
              </template>
              <template #default>
                <div @click.stop style="margin-right: 20px; font-size: 24px">
                  背景
                  <el-color-picker
                    @click.stop
                    show-alpha
                    v-model="bgcolor"
                    :teleported="false"
                    :predefine="[
                      '#FFFF00',
                      '#00FF00',
                      '#00FFFF',
                      '#00CED1',
                      '#1E90FF',
                      '#0000FF',
                      '#8B00FF',
                      '#000000',
                    ]"
                    @change="handleMenu('背景', $event)"
                  />
                </div>

                <div @click.stop style="margin-right: 20px; font-size: 24px">
                  模型
                  <el-color-picker
                    v-model="modelcolor"
                    :teleported="false"
                    :predefine="[
                      '#A9A6AB',
                      '#BEBEC8',
                      '#C0C0C0',
                      '#A8A8A8',
                      '#5A5A5A',
                      '#B5A642',
                      '#8C7853',
                    ]"
                    @change="handleMenu('模型', $event)"
                  />
                </div>
              </template>
            </el-popover>

            <el-dropdown style="margin-right: 10px" trigger="click">
              <img src="./img/camera-type.svg" />{{
                modelInfo.cameraType === "Perspective" ? "透视相机" : "正交相机"
              }}
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleMenu('正交相机')"
                    >正交相机</el-dropdown-item
                  >
                  <el-dropdown-item @click="handleMenu('透视相机')"
                    >透视相机</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown trigger="click">
              <div style="display: flex; align-items: center">
                <img style="width: 40px" src="./img/selected-type.svg" />
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleMenu('所有')"
                    ><img
                      v-show="selectType === '所有'"
                      src="./img/tree-triangle.svg"
                      alt=""
                      style="width: 15px; height: 15px"
                    />选择所有模型</el-dropdown-item
                  >
                  <el-dropdown-item @click="handleMenu('车型')"
                    ><img
                      v-show="selectType === '车型'"
                      src="./img/tree-triangle.svg"
                      alt=""
                      style="width: 15px; height: 15px"
                    />选择车模型</el-dropdown-item
                  >
                  <el-dropdown-item @click="handleMenu('测点')"
                    ><img
                      v-show="selectType === '测点'"
                      src="./img/tree-triangle.svg"
                      alt=""
                      style="width: 15px; height: 15px"
                    />选择测点</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="main-content" style="position: relative;">
          
          <modelApp />
          <layer @change="layerChange"  ref="layerRef">
          </layer>
        </div>
        <pointList @checked="pointchecked" v-model="showPointList" :data="pointData.data"></pointList>
      </main>
    </div>
  </div>
</template>
<script setup>
import { onMounted, provide, reactive, ref } from "vue";
import leftTree from "./components/left-tree.vue";
import pointList from "./components/point-list.vue";
import pointTree from "./components/point-tree.vue"
import modelApp from "./components/model-app.vue";
import ENGINE_ASSEMBLY_JSON from "./json/ENGINE ASSEMBL.json";
import pointData from './json/测点数据.json'
import layer from './components/layer.vue'

const modelInfo = {
  event: {
    model: (val) => {
      console.log("event-model", val);
      selectKeys.value = [...val];
    },
    loading: (type, val) => {
      if (type === "afterLoading") treeData.value = val;
    },
  },
  cameraType: "Orthographic",
  selectType: ["model", "point"],
  // cameraType: 'Perspective'
};
provide("3d-info", modelInfo);

let selectType = ref("所有");
const isDrawer = ref(window.innerWidth < 1000);
let selectKeys = ref([]);
let treeData = ref({});

const treeRef = ref(null);
const leftDrawer = ref(false);
const showPointList = ref(false)
const setSelectModel = (key) => {
  modelInfo.modelEvent.setSelectedModel(key);
};

const visibleModel = (item, visible) => {
  modelInfo.modelEvent.setVisibleModel(visible, item.uuid);
};

const bgcolor = ref("#FFFFFF");
const modelcolor = ref(null);

const layerRef = ref(null)
const showPointTree = ref(false)

function pointTreeChange(val) {
  console.log(val)
  if (val.type === 'check') {
    console.log(modelInfo)
    if (val.bool) {
      modelInfo.pointAttrMethods.setHighlight(val.indexs)
    } else {
      modelInfo.pointAttrMethods.resetHighlight(val.indexs)
    }
  }
  if (val.type === 'eye') {
    modelInfo.pointAttrMethods.setVisiblePoint(val.indexs, !val.bool)

  }
}
function layerChange(value) {
  console.log(value)
  modelInfo.renderPointToLines(
    value.map(item => {
      return {
        index: item.data.index,
        mouse: {x:item.centerX, y:item.centerY}
      }
    }));
}
function pointchecked(val) {
  console.log('index',val)
  if (val.checked) {
    layerRef.value.addItem(val)
  } else {
    layerRef.value.removeItemByKey('uuid', val.uuid)
  }
}
const handleMenu = async (type, value) => {
  if (type === "打开模型") {
    modelInfo.renderModels(ENGINE_ASSEMBLY_JSON);
  }

  if (type === "加载点") {
    console.log(pointData.data.length)
    showPointTree.value = true
    modelInfo.pointAttrMethods.setUpPoints([...pointData.data]);
    modelInfo.framework.fitModelToViewport(modelInfo);
  }
  if (type === "打开点") {
    showPointList.value = true
  }
  if (type === "打开所有节点") {
    treeRef.value.selectToggleExpandAll();
  }

  if (type === "穿透模式") {
    modelInfo.pointAttrMethods.setPointDepth(true);
  }
  if (type === "取消穿透") {
    modelInfo.pointAttrMethods.setPointDepth(false);
  }

  if (type === "背景") {
    if (value) {
      modelInfo.framework.setSceneBackground(bgcolor.value);
    } else {
      modelInfo.framework.setSceneBackground("#FFFFFF");
    }
  }

  if (type === "模型") {
    if (value) {
      modelInfo.modelEvent.setModelColor(value);
    } else {
      modelInfo.modelEvent.restModelColor();
    }
  }

  if (type === "正交相机") {
    modelInfo.cameraType = "Orthographic";
    modelInfo.framework.setCamera("Orthographic");
  }
  if (type === "透视相机") {
    modelInfo.cameraType = "Perspective";
    modelInfo.framework.setCamera("Perspective");
  }

  if (type == "所有") {
    selectType.value = type;
    modelInfo.setSelectType(["model", "point"]);
  }
  if (type == "车型") {
    selectType.value = type;
    modelInfo.setSelectType(["model"]);
  }

  if (type == "测点") {
    selectType.value = type;
    modelInfo.setSelectType(["point"]);
  }
};
</script>
<style lang="less" scoped>
aside {
  // pointer-events: none;
  user-select: none;
  width: 100%;
  min-width: 200px;
  height: 100%;
  // background-color: antiquewhite;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  list-style: none;
  box-shadow: -4px -4px 12px rgb(255 255 255),
    4px 4px 12px rgb(121 130 160 / 75%);
  .aside-header {
    display: flex;
    align-items: center;
    img {
      width: 30px;
      margin-right: 10px;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  list-style: none;
  box-shadow: -4px -4px 12px rgb(255 255 255),
    4px 4px 12px rgb(121 130 160 / 75%);
  box-sizing: border-box;
  padding: 6px;
  user-select: none;
  .zbs-button-box {
    max-width: 50%;
    display: flex;
    justify-content: space-between;
  }
  .page-config-box {
    height: calc(100vh - 30vh - 54px - 60px);
    overflow-y: scroll;
  }
}

.layout-box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-color: #ebecf0;
  box-sizing: border-box;
  .content-box {
    display: flex;
    width: 100%;
    height: 100%;
    // height: 100%;
    .main-header {
      height: 30px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #2953fa;
      img {
        width: 30px;
        margin-right: 10px;
        &:last-child {
          margin-right: 0px;
        }
      }
      &-left {
        font-size: 18px;
      }
      &-right {
        display: flex;
        align-items: center;
      }
    }

    main {
      flex: 1;
      border-radius: 4px;
      /* pointer-events: none; */
      list-style: none;
      box-shadow: -4px -4px 12px rgb(255 255 255),
        4px 4px 12px rgb(121 130 160 / 75%);
      padding: 12px;
      box-sizing: border-box;
      height: 100%;
      .main-content {
        width: 100%;
        height: calc(100% - 30px);
        overflow-x: hidden;
        overflow-y: scroll;
      }
    }
  }
  footer {
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    list-style: none;
    box-shadow: -4px -4px 12px rgb(255 255 255),
      4px 4px 12px rgb(121 130 160 / 75%);
  }
}
</style>
<style>
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
</style>
